<template>
  <div>
    <bread-crumb :one="'平台管理'" :two="'功能组件管理'"></bread-crumb>

    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane v-for="item, index in bundles" :label="item.name" :name="String(index)" :key="index"></el-tab-pane>
    </el-tabs>

    <el-form :inline="true" :model="formData">
      <el-form-item label="组件名：">
        <el-input v-model="formData.bundle"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch()">搜索</el-button>
        <el-button type="primary" icon="delete" @click="handleClear()">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading.body="loading" :data="tableData" border>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="组件名" width="250"></el-table-column>
      <el-table-column prop="version" label="版本"></el-table-column>
      <el-table-column prop="state" label="状态"align="center">
        <template slot-scope="scope">
          <span class="green_circle" v-if="scope.row.state"></span>
          <span class="red_circle" v-else></span>
        </template>
      </el-table-column>
      <el-table-column prop="symbolicName" label="描述" width="200"></el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="text" @click="">组件管理</el-button>
          <el-button size="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination />
  </div>
</template>

<script>
  import BreadCrumb from "@/components/BreadCrumb.vue";
  import {mixins} from "@/core";

  export default {
    components: {
      BreadCrumb,
    },
    mixins: [mixins],
    data () {
      return {
        formData: {
          bundle: ""
        },
        activeName: "0",
        bundles: [{
        	name: "SV-02",
          serverId: 2
        },{
          name: "SV-03",
          serverId: 3
        },{
          name: "SV-01",
          serverId: 65
        }],
        API: {
          query: "/gafe/bundles"
        }
      }
    },
    created () {
    	this.API.query += "?serverId=" + this.bundles[0].serverId;
    },
    methods: {
      handleTabClick(tab, event) {
      	const obj = this.bundles.forEach((item) => {
          if (item.name === tab.label) {
            this.API.query = "/gafe/bundles?serverId=" + item.serverId;
            this.getTableData();
          }
        });
      }
    }
  }
</script>
